<template>
  <div class="mentoubaoshen-shujutongji  mg-t-30">
    <div class="card">
      <p>
        门头审核总数<strong>{{ TongJiShuJu.examineNum }}</strong
        >个
      </p>
      <ul>
        <li>
          <p>{{ TongJiShuJu.num }}</p>
          <span>上报量(个)</span>
        </li>
        <li>
          <p>{{ TongJiShuJu.errNum }}</p>
          <span>驳回量(个)</span>
        </li>
        <li>
          <p>{{ TongJiShuJu.succNum }}</p>
          <span>通过量(个)</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { MenTouBaoShenDB } from '@/api'
export default {
  data() {
    return {
      TongJiShuJu: [],
    }
  },
  created() {
    MenTouBaoShenDB.getTonjiShuJu().then((res) => {
      console.info(res)
      this.TongJiShuJu = res.data[0]
    })
  },
}
</script>

<style lang="less" scoped>
.mentoubaoshen-shujutongji {
  .card {
    width: 464px;
    height: 186px;
    background: url(../../../assets/images/mentoubaoshen/card.png) no-repeat 0 0;
    text-align: center;

    > p {
      font-size: 18px;
      color: #ffffff;
      line-height: 80px;
      height: 80px;
      border-bottom: 1px solid #5f717f;
      margin: 0 28px;

      strong {
        font-size: 32px;
        font-family: 'DIN';
        font-weight: bold;
        color: #11e0ff;
        margin: 0 10px;
        vertical-align: bottom;
      }
    }

    ul {
      display: flex;
      justify-content: space-around;
      color: #ffffff;
      margin-top: 20px;

      li {
        position: relative;
        flex: 1;

        &:not(:last-child):after {
          content: '';
          display: block;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 40px;
          background-color: #5f717f;
        }
      }

      p {
        font-size: 24px;
        font-family: DIN;
        font-weight: bold;
        color: #11e0ff;
      }
    }
  }
}
</style>
